<script setup>
defineProps({
  extraClass: {
    type: String,
    default: ''
  },
  modelValue: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'search-click'])
const updateValue = (e) => {
  emit('update:modelValue', e.target.value)
}
const search_click = () => {
  emit('search-click')
}
</script>

<template>
  <div class="input-box" :class="extraClass">
    <input
      type="text"
      class="input"
      :value="modelValue"
      @input="updateValue"
      @keydown.enter="search_click"
      :placeholder="text"
    />
    <span @click="search_click">搜索</span>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;

.input-box {
  position: relative;
  border-radius: 4rem;
  border: solid 1px transparent;

  &::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    mask: url('@/assets/svg/search.svg') no-repeat center/100%;
    background-color: $color-black;

    position: absolute;
    top: 1rem;
    left: 1rem;

    transition: all 0.3s ease-in-out;
  }

  &:focus-within::before {
    /* 当子元素获取焦点时 */
    background-color: $color-primary;
  }

  &:focus-within {
    border-radius: 4rem;
    border: solid 1px rgba($color-primary, 0.1);
  }
}

.input {
  width: 30rem;
  height: 4rem;
  font-size: 1.4rem;
  padding: 0 4rem;
  border-radius: 4rem;
  transition: width 0.5s 0.1s;
  transform-origin: top right;

  // &:focus {
  //   width: 30rem;
  //   outline: none;
  //   box-shadow: none;
  //   transition-delay: 0;
  // }
}

span {
  width: 5rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 4rem;
  font-size: 1.4rem;
  text-align: center;
  background-color: $color-primary-dark-2;
  color: $color-white;

  cursor: pointer;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

// .input:focus + span {
//   background: rgba($color-primary, 0.1);
//   color: $color-primary;
// }
</style>
